<template>
	<view class="dataindex">
		<custom-head-top>
			<template #left>
				数据概览
			</template>
			<template #right>
				<uni-datetime-picker
					style="width: 300px;"
					type="daterange"
					v-model="dataRange"
					:start="deftData[0]"
					:end="deftData[1]"
					@change="dateChange"
				/>
			</template>
		</custom-head-top>
		<view class="main">
			<view class="grid">
				
				<view class="section">
					<uni-card title="使用量" margin="0" :is-shadow="false">
						<view class="box">
							<view class="icon">
								<uni-icons type="eye-filled" size="40" color="#9A60B4"></uni-icons>
							</view>
							<view class="text">
								<view class="big">2345<text class="unit">次</text></view>
								<view class="small">数据库请求次数</view>
							</view>
						</view>
					</uni-card>
				</view>
				
				<view class="section">
					<uni-card title="使用人数" margin="0" :is-shadow="false">
						<view class="box">
							<view class="icon">
								<uni-icons type="person-filled" size="40" color="#1890FF"></uni-icons>
							</view>
							<view class="text">
								<view class="big">2345<text class="unit">人</text></view>
								<view class="small">IP用户量统计</view>
							</view>
						</view>
					</uni-card>
				</view>
				
				<view class="section">
					<uni-card title="硬币使用" margin="0" :is-shadow="false">
						<view class="box">
							<view class="icon">
								<uni-icons type="smallcircle" size="40" color="#91CB74"></uni-icons>
							</view>
							<view class="text">
								<view class="big">2345<text class="unit">人</text></view>
								<view class="small">使用硬币人次</view>
							</view>
						</view>
					</uni-card>
				</view>
				
				<view class="section">
					<uni-card title="上传量" margin="0" :is-shadow="false">
						<view class="box">
							<view class="icon">
								<uni-icons type="smallcircle" size="40" color="#FC8452"></uni-icons>
							</view>
							<view class="text">
								<view class="big">2345<text class="unit">张</text></view>
								<view class="small">上传图片量</view>
							</view>
						</view>
					</uni-card>
				</view>
				
				<view class="section">
					<uni-card title="使用趋势图" margin="0" :is-shadow="false">
						<data-trend :datas="baseDataList"></data-trend>
					</uni-card>					
				</view>
				<view class="section">
					<uni-card title="分类喜好度" margin="0" :is-shadow="false">
						<dataLikeClass :datas="likeClassData"></dataLikeClass>
					</uni-card>
				</view>
				
				<view class="section">
					<uni-card title="下载Top9" margin="0" :is-shadow="false">											
						<dataTopcount :rank='downloadList' :nodata="downloadNodata"></dataTopcount>
					</uni-card>
				</view>
				<view class="section">
					<uni-card title="评分Top9" margin="0" :is-shadow="false">
											
						<dataTopcount :rank="scoreList" :nodata='scoreNodata'></dataTopcount>
					</uni-card>
				</view>
					
				
			</view>
		</view>
	</view>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref } from 'vue';

const dataRange = ref([]);

const deftData = ref([
	dayjs().subtract(6, "M").startOf("day").valueOf(),
	dayjs().endOf("day").valueOf()
])

const dateChange = (e) => {
	console.log(e);
}
console.log(deftData.value);
</script>

<style lang="scss">

.main{
	padding: 20px;
	.grid {
		display: grid;
		grid-template-columns: repeat(24, 1fr);
		gap: 20px;
		.section{
			border: 1px solid pink;
			grid-column: span 6;
			min-height: 200px;
		}
		.section:nth-child(5) {
			grid-column: span 16;
		}
		.section:nth-child(6) {
			grid-column: span 8;
		}
		.section:nth-child(7) {
			grid-column: span 12;
		}
		.section:nth-child(8) {
			grid-column: span 12;
		}
	}
}

@media (max-width: 992px) {
	.section {
		grid-column: span 24 !important;
	}
}
	
:deep(.uni-date-range--x) {
	right: 0;
}

:deep(.uni-popper__arrow) {
	left: 80px;
}
       
</style>
